.sidebar {
	width: $sidebar-width;
	height: 100%;
	z-index: 100;
	position: absolute;
	background-color: $sidebar-bg;
	border-right: 1px solid $sidebar-border-color;
}
.sidebar-item {
	width: $sidebar-width;
	padding: $sidebar-item-padding-y $sidebar-item-padding-x;
	border-left: $sidebar-item-border-width solid transparent;

	.icon {
		margin-left: -$sidebar-item-border-width;
	}
}
.sidebar-header {
	width: $sidebar-width;
}
sidebar-toggle {
	padding: $sidebar-item-padding-y $sidebar-item-padding-x;
	display: inline-block;
}
.sidebar-title {
	font-size: $sidebar-font-size;
	line-height: $sidebar-icon-width;
	display: inline-block;
}
.sidebar-item,
sidebar-toggle {
	.icon,
	.text {
		display: inline-block;
		line-height: $sidebar-line-height;
		color: $sidebar-color;
	}
	.icon {
		width: $sidebar-icon-width;
		font-size: $sidebar-font-size;
		text-align: center;
	}
	&:hover {
		border-color: $sidebar-item-hover-bg;
		background-color: $sidebar-item-hover-bg;
	}
	&:active {
		border-color: $sidebar-item-active-bg;
		background-color: $sidebar-item-active-bg;
	}
	&:hover,
	&:active {
		.icon,
		.text {
			color: $sidebar-hover-color;
		}
	}
	&:active {
		color: $sidebar-item-active-color;
	}
	&.active {
		border-color: $sidebar-item-active-color;
		background-color: rgba($sidebar-item-active-color, 0.1);

		.icon,
		.text {
			color: $sidebar-item-active-color;
		}
	}
}
.sidebar-mini {
	width: $sidebar-min-width;
}
